<template>
  <div class="container" @wheel="wheelEvent($event)">
    <div class="header">
      <div class="left">
        <div class="top">
          <span class="date">{{ storetime.textTime }}</span>
          <span class="time">{{ storetime.textDate }}</span>
        </div>
      </div>
      <div class="title">大数据汇聚治理服务平台</div>
      <div class="right">
        <div class="menu">
          <a href="">
            <img src="@/assets/imgs/images/a10.png" />
          </a>
          <a href="">
            <img src="@/assets/imgs/images/a14.png" />
          </a>
        </div>
      </div>
    </div>
    <div class="layout-effct">
      <!-- 背景上的定位效果 -->
      <img
        v-for="j in 6"
        :key="j"
        :src="require(`@/assets/imgs/images/a${j + 15}.png`)"
        alt=""
      />
      <!-- 双侧箭头 -->
      <img src="@/assets/imgs/images/a15.png" @click="scroll('left')" />
      <img src="@/assets/imgs/images/a11.png" @click="scroll('right')" />
    </div>
    <main ref="areas">
      <div
        v-for="(v, index) in arealist"
        :key="index"
        class="area"
        @mouseenter="slider($event)"
      >
        <div class="area-main">
          <!-- 小图标 -->
          <div class="little-icon">
            <img
              v-for="(t, f) in [1, 4, 5, 3]"
              :key="f"
              :class="`a${f + 1}`"
              :src="require(`@/assets/imgs/areas/a${t}.png`)"
            />
          </div>
          <!-- 下落效果 -->
          <div class="drops">
            <template v-if="v.mod == 'up'">
              <img
                v-for="v in 10"
                :key="v"
                src="@/assets/imgs/areas/a12.png"
                :style="`
                    transform: scale(${randomNumArr1[v]});
                    animation: upstar linear ${randomNumArr2[v]}s infinite;`"
              />
            </template>
            <template v-if="v.mod == 'down'">
              <img
                v-for="v in 10"
                :key="v"
                src="@/assets/imgs/areas/a11.png"
                :style="`
                    transform: scale(${randomNumArr1[v]});
                    animation: dropstar linear ${randomNumArr2[v]}s infinite;`"
              />
            </template>
          </div>
          <div class="area-title">{{ v.label }}</div>
          <div class="main-effect">
            <!-- 底部效果 -->
            <div class="bottom">
              <img
                v-for="l in 4"
                :key="l"
                :class="'line-' + l"
                src="@/assets/imgs/areas/a9.png"
              />
            </div>
            <!-- 基础底座，光线，圆盘 -->
            <div class="base">
              <img src="@/assets/imgs/areas/a6.png" />
              <img src="@/assets/imgs/areas/a2.png" />
              <img src="@/assets/imgs/areas/a7.png" />
            </div>
            <!-- 主图标 -->
            <img
              class="main-icon"
              :src="require(`@/assets/imgs/areas/${v.icon}.png`)"
            />
          </div>
        </div>
        <!-- area菜单 -->
        <div
          class="area-menus"
          :style="`background-image: url(require(@/assets/imgs/box/a${Math.ceil(
            v.children.length / 3
          )}.png));
          grid-template-columns: repeat(${Math.ceil(
            v.children.length / 3
          )}, 150rem);`"
        >
          <a
            v-for="(g, o) in v.children"
            :key="o"
            class="func"
            :href="g.link"
            @click="g.funcParam && wbMenuOpen(g.funcParam)"
            :target="g.target_value"
          >
            <img :src="require(`@/assets/imgs/funcs/a${o + 1}.png`)" />
            <div class="label">{{ g.label }}</div>
          </a>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import $ from 'jquery'
import { baseUrl, qqdz } from '@/config/global'
export default {
  name: 'BigScreen',
  data () {
    return {
      randomNumArr1: [],
      randomNumArr2: [],
      storetime: {
        textDate: "",
        textTime: "",
      },
      arealist: [
        {
          icon: "a8",
          mod: "down",
          label: "数据探查管理",
          children: [
            {
              link: baseUrl + "/index/indexRequest.do?Type=111212",
              label: "数据探查",
              target_value: "_blank"
            },
            {
              link: "",
              label: "数据定义",
              target_value: "_blank"
            },
          ],
        },
        {
          icon: "a14",
          mod: "up",
          label: "数据接入管理",
          children: [
            {
              link: baseUrl + "/index/indexShow.do?Type=6",
              label: "业务系统管理",
              target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=1",
              label: "关系数据库注册管理",
              target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexShow.do?Type=7",
              label: "服务器注册管理",
              target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=5",
              label: "数据接入定义",
              target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=223",
              label: "数据对账",
              target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=117",
              label: "大数据注册管理", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=111",
              label: "MPP注册管理", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexShow.do?Type=119",
              label: "多表联合接入", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexShow.do?Type=6",
              label: "非结构化数据源", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=113",
              label: "全文搜索注册", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=114",
              label: "KAFKA数据源", target_value: "_blank"
            },
          ],
        },
        {
          icon: "a15",
          mod: "down",
          label: "数据治理管理",
          children: [
            {
              link: baseUrl + "/index/indexRequest.do?Type=10",
              label: "数据标准管理", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexShow.do?Type=335",
              label: "数据处理规则", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=6",
              label: "数据分发", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=225",
              label: "数据提取", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=888",
              label: "数据关联管理", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=9",
              label: "资源编目管理", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=11",
              label: "数据质量管理", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=1000004",
              label: "数据运维管理", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=222",
              label: "数据安全管理", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=15",
              label: "表结构扫描", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=226",
              label: "生命周期管理", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=999",
              label: "权限管理", target_value: "_blank"
            },
            {
              link: baseUrl + "/sjzzztk/sjzzztkindex.do?TYPE=3",
              label: "规则配置", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=1213",
              label: "可视化管理", target_value: "_blank"
            },
          ],
        },
        {
          icon: "a16",
          mod: "up",
          label: "数据仓库管理",
          children: [
            {
              link: baseUrl + "/index/indexRequest.do?Type=22",
              label: "数据源管理", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=227",
              label: "原始库管理", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexShow.do?Type=21",
              label: "资源库管理", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexShow.do?Type=22",
              label: "主题库管理", target_value: "_blank"
            },
            {
              link: baseUrl + "/jghbd/jghbdindex.do?TYPE=5",
              label: "业务库管理", target_value: "_blank"
            },
            {
              link: baseUrl + "/sjzzztk/sjzzztkindex.do?TYPE=2",
              label: "知识库管理", target_value: "_blank"
            },
            {
              link: "",
              label: "业务索引库管理", target_value: "_blank"
            },
            {
              link: baseUrl + "/sjbmgl/zybqgl/indexTo.do",
              label: "资源目录管理", target_value: "_blank"
            },
          ],
        },
        {
          icon: "a17",
          mod: "down",
          label: "数据服务管理",
          children: [
            {
              link: "",
              func: 'wbMenuOpen("ZYFWZCGL")',
              funcParam: 'ZYFWZCGL',
              label: "资源服务注册管理",
            },
            {
              link: "",
              func: 'wbMenuOpen("ZYFWSQGL")',
              funcParam: 'ZYFWSQGL',
              label: "资源服务申请管理",
            }, {
              link: "",
              func: 'wbMenuOpen("ZYFWSPGL")',
              funcParam: 'ZYFWSPGL',
              label: "资源服务审批管理",
            },
            {
              link: "",
              func: 'wbMenuOpen("WDFW")',
              funcParam: 'WDFW',
              label: "我的服务",
            },
            {
              link: "",
              label: "智能建模", target_value: "_blank"
            },
            {
              link: "",
              label: "智能报表", target_value: "_blank"
            },
            {
              link: "",
              label: "智能云搜", target_value: "_blank"
            },
            {
              link: baseUrl + "/sysview/datainter/index.do",
              label: "智能交互查询", target_value: "_blank"
            },
            {
              link: baseUrl + "/index/indexRequest.do?Type=1214",
              label: "建库标准扫描", target_value: "_blank"
            },
            {
              link: "http://58.240.16.50:17080/",
              label: "可视化模型", target_value: "_blank"
            },
          ],
        },
        {
          icon: "a18",
          mod: "up",
          label: "可视化管理",
          children: [
            {
              link: baseUrl + "/indexNew/sjzyzhIndex_new_alone.do",
              label: "资源可视化", target_value: "_blank"
            },
            {
              link: baseUrl + "/sjxyt/index_alone.do",
              label: "治理可视化", target_value: "_blank"
            },
            {
              link: baseUrl + "/indexNew/zyfwdtIndex_alone.do",
              label: "服务可视化", target_value: "_blank"
            },
            {
              link: baseUrl + "/sjh/index_alone.do",
              label: "治理架构可视化", target_value: "_blank"
            },
            {
              link: baseUrl + "/home/yxztt_dandu.do",
              label: "运维可视化",
            },
          ],
        },
      ],
    }
  },
  created () {
    for (var i = 0; i <= 15; i++) {
      this.randomNumArr1.push(this.RanNum(0.2, 1))
      this.randomNumArr2.push(this.RanNum(2, 6))
    }
    this.datetime()
  },
  methods: {
    dayjs () {
      var time = new Date();
      var year = time.getFullYear();
      var math = time.getMonth() + 1;
      if (math < 10) {
        math = "0" + math;
      }
      var Hours = time.getHours();
      if (Hours < 10) {
        Hours = "0" + Hours;
      }
      var Minutes = time.getMinutes();
      if (Minutes < 10) {
        Minutes = "0" + Minutes;
      }
      var Seconds = time.getSeconds();
      if (Seconds < 10) {
        Seconds = "0" + Seconds;
      }
      var week = time.getDay();
      var date = time.getDate();
      if (date < 10) {
        console.log(date);
        date = "0" + date;
      }
      var obj = {};
      obj.hours = Hours + ":" + Minutes + ":" + Seconds;
      obj.date = year + "/" + math + "/" + date;
      obj.week = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ][week];
      return obj;
    },
    getstrp () {
      var obj = this.dayjs();
      this.storetime.textDate = obj.date + "  " + obj.week;
      this.storetime.textTime = obj.hours;
    },
    datetime () {
      this.getstrp();
      setInterval(() => this.getstrp(), 1000);
    },
    scroll (ar) {
      if (ar == "left")
        this.$refs.areas.scroll({
          left: 0,
          behavior: "smooth",
        });
      if (ar == "right")
        this.$refs.areas.scroll({
          left: this.$refs.areas.scrollWidth,
          behavior: "smooth",
        });
    },
    slider (e) {
      e.target.scrollIntoView({ behavior: "smooth", block: "end" });
    },
    wheelEvent (e) {
      this.$refs.areas.scrollLeft += e.deltaY;
    },
    RanNum (n, m) {
      return (Math.random() * (m - n) + n).toFixed(2);
    },
    wbMenuOpen (type) {
      var url = "";
      var name = "";
      var value = "";
      if (type == "ZYFWZCGL") {// 资源服务注册管理
        url = qqdz + "home/index.action";
        name = "address";
        value = "1";
      } else if (type == "ZYFWSQGL") {// 资源服务申请管理
        url = qqdz + "home/index.action";
        name = "address";
        value = "2";
      } else if (type == "ZYFWSPGL") {// 资源服务审批管理
        url = qqdz + "home/index.action";
        name = "address";
        value = "3";
      } else if (type == "GJFWSPGL") {// 挂接服务审批管理
        url = qqdz + "home/index.action";
        name = "address";
        value = "4";
      } else if (type == "FWJKZCGL") {// 服务接口注册管理
        url = qqdz + "home/index.action";
        name = "address";
        value = "5";
      } else if (type == "RZAQSJPT") {// 服务接口注册管理
        url = "";
      } else if (type == "ZYFWZRCX") {
        url = qqdz + "home/index.action";
        name = "address";
        value = "7";
      } else if (type == "WDFW") {// 我的服务
        url = qqdz + "home/index.action";
        name = "address";
        value = "6";
      } else if (type == "999") {// 权限
        url = qqdz + "home/index.action";
        name = "address";
        value = "999";
      }
      this.dynamicFormSubmits(url, name, value);
    },
    // 免登陆进入对应的页面 yzl
    dynamicFormSubmits (url, name, value) {
      var action = url;// 提交表单的Controller访问路 径
      var form = $("<form></form>");
      form.attr("action", action);
      form.attr("method", "post");
      form.attr("target", "_blank");
      /*	var accountInput = $("<input type='hidden' name='account'  value='"
        + account + "' />");
    var passwordInput = $("<input type='hidden' name='password'  value='"
        + password + "' />");*/
      if (name != '' && value != '') {
        var search = $("<input type='hidden' name='" + name + "' value='"
          + value + "' />");
        form.append(search);
      }
      // form.append(accountInput);
      // form.append(passwordInput);
      form.appendTo("body");
      form.css("display", "none");
      form.submit();
      return false;
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

:root {
  --bgimg: url("@/assets/imgs/images/a22.png");
}

@keyframes dropstar {
  0% {
    opacity: 0;
    top: 0;
  }
  20%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 300rem;
  }
}

@keyframes upstar {
  0% {
    opacity: 0;
    top: 340rem;
  }
  20%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 40rem;
  }
}

@keyframes updown {
  0%,
  100% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(8px);
  }
}

@keyframes translateleft {
  0% {
    opacity: 0;
    left: 0;
  }
  20%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: 1920rem;
  }
}

@keyframes translateright {
  0% {
    opacity: 0;
    right: 0;
  }
  20%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    right: 1920rem;
  }
}

@keyframes rotateright {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateleft {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

html {
  overflow: hidden;
  font-size: 0.05208333333vw;
}

html body {
  font-size: 16rem;
  height: 100vh;
  background-image: var(--bgimg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container .header {
  height: 99rem;
  background: url(@/assets/imgs/images/a1.png) center/cover no-repeat;
  display: flex;
  justify-content: space-between;
}

.container .header > div {
  flex: 1;
  flex-shrink: 0;
}

.container .header > .left > .top {
  margin: 25rem 0;
}

.container .header > .left > .top > span {
  padding-left: 20rem;
  vertical-align: middle;
}

.container .header > .left > .top .date {
  color: yellow;
  font-size: 24rem;
}

.container .header > .left > .top .time {
  color: #00d8ff;
  font-size: 16rem;
}

.container .header > .left .wc {
  color: white;
  font-size: 18rem;
  padding-left: 30rem;
}

.container .header .title {
  font-size: 40rem;
  color: #fff;
  text-align: center;
  line-height: 92rem;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3),
    0 0 20px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.3),
    0 0 40px rgba(255, 255, 255, 0.3);
}

.container .header .right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  column-gap: 10rem;
  padding-bottom: 20rem;
}

.container .header .right > .menu {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  column-gap: 20rem;
}

.container .header .right > .menu a {
  text-decoration: none;
  display: block;
}

.container .header .right > .menu img {
  flex-shrink: 0;
  height: 34rem;
  width: 34rem;
}

.container .header .right > .notice {
  flex-shrink: 0;
  line-height: 30rem;
  color: #fff;
  font-size: 16rem;
  padding-right: 20rem;
}

.layout-effct {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}

.layout-effct > img {
  position: absolute;
}

.layout-effct > img:nth-of-type(1) {
  top: 138rem;
  width: 156rem;
  animation: translateright linear 10s infinite;
}

.layout-effct > img:nth-of-type(2) {
  bottom: 87rem;
  left: 1238rem;
  width: 86rem;
  animation: rotateleft linear 10s infinite;
}

.layout-effct > img:nth-of-type(3) {
  bottom: 38rem;
  left: 1360rem;
  width: 560rem;
}

.layout-effct > img:nth-of-type(4) {
  top: 168rem;
  width: 156rem;
  animation: translateleft linear 10s infinite;
}

.layout-effct > img:nth-of-type(5) {
  bottom: 97rem;
  left: 373rem;
  width: 122rem;
  animation: rotateright linear 10s infinite;
}

.layout-effct > img:nth-of-type(6) {
  bottom: 73rem;
  left: 0;
  width: 947rem;
}

.layout-effct > img:nth-of-type(7) {
  top: 46%;
  left: 0;
  width: 100rem;
  z-index: 1;
  display: block;
}

.layout-effct > img:nth-of-type(7):hover {
  filter: brightness(1.6);
}

.layout-effct > img:nth-of-type(8) {
  top: 46%;
  right: 0;
  width: 100rem;
  z-index: 1;
  display: block;
}

.layout-effct > img:nth-of-type(8):hover {
  filter: brightness(1.6);
}

main {
  display: flex;
  padding-top: 42rem;
  margin: 0 54rem;
  margin-top: calc(20vh - 200rem);
  overflow: auto hidden;
  scrollbar-width: 0;
  transform: scale(0.92);
}

main::-webkit-scrollbar {
  display: none;
}

main > .area {
  flex-shrink: 0;
  display: flex;
}

main > .area:hover .area-menus {
  display: grid;
}

main > .area:hover .area-main {
  transform: scale(1.05);
}

main > .area:hover .area-main .area-title {
  font-size: 36rem;
  color: yellow;
}

main > .area:hover .area-main .little-icon .a2 {
  animation: rotateright linear 2s infinite;
}

main > .area:hover .area-main .little-icon .a3 {
  animation: rotateleft linear 2s infinite;
}

main > .area:hover .area-main .base > img:nth-of-type(1) {
  filter: brightness(1.4);
}

main > .area:hover .area-main .base > img:nth-of-type(2) {
  filter: brightness(1.6);
}

main > .area > div {
  flex-shrink: 0;
}

main > .area > .area-main {
  transition: all 0.3s;
  background: url("@/assets/imgs/areas/a13.png") no-repeat;
  background-size: 120% 108%;
  background-position: 48% center;
  width: 450rem;
  height: 732rem;
  position: relative;
  left: 0;
}

main > .area > .area-main .area-title {
  font-size: 30rem;
  transition: all 0.3s;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto 0;
  top: 78%;
}

main > .area > .area-main .little-icon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto 0;
  top: -24rem;
}

main > .area > .area-main .little-icon img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto 0;
}

main > .area > .area-main .little-icon .a1 {
  top: 67rem;
  width: 46rem;
}

main > .area > .area-main .little-icon .a2 {
  animation: rotateright linear 10s infinite;
  top: 42rem;
  width: 100rem;
}

main > .area > .area-main .little-icon .a3 {
  top: 27rem;
  width: 130rem;
  animation: rotateleft linear 10s infinite;
}

main > .area > .area-main .little-icon .a4 {
  top: 48rem;
  width: 84rem;
}

main > .area > .area-main .drops {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto 0;
  transform: scale(0.8);
  top: 10rem;
  text-align: center;
}

main > .area > .area-main .drops img {
  position: relative;
  left: 0;
  width: 35rem;
}

main > .area > .area-main > .main-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto 0;
  top: 188rem;
  height: 100%;
}

main > .area > .area-main > .main-effect .base {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto 0;
  top: 120rem;
}

main > .area > .area-main > .main-effect .base > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto 0;
  transition: all 0.3s;
}

html
  body
  > main
  > .area
  > .area-main
  > .main-effect
  .base
  > img:nth-of-type(1) {
  top: 74rem;
  width: 87rem;
}

html
  body
  > main
  > .area
  > .area-main
  > .main-effect
  .base
  > img:nth-of-type(2) {
  top: -4rem;
  width: 177rem;
}

html
  body
  > main
  > .area
  > .area-main
  > .main-effect
  .base
  > img:nth-of-type(3) {
  top: 40rem;
  width: 226rem;
}

main > .area > .area-main > .main-effect .bottom {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto 0;
  top: 174rem;
}

main > .area > .area-main > .main-effect .bottom > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto 0;
  width: 226rem;
}

main > .area > .area-main > .main-effect .bottom > .line-1 {
  top: 10rem;
}

main > .area > .area-main > .main-effect .bottom > .line-2 {
  top: 20rem;
}

main > .area > .area-main > .main-effect .bottom > .line-3 {
  top: 30rem;
}

main > .area > .area-main > .main-effect .bottom > .line-4 {
  top: 40rem;
}

main > .area > .area-main > .main-effect .main-icon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto 0;
  top: 60rem;
  width: 90rem;
  animation: updown linear 2s infinite;
}

main > .area .area-menus {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 86%;
  display: none;
  grid-template-rows: repeat(3, 1fr);
  padding: 100rem 20rem 60rem;
}

main > .area .area-menus > .func {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

main > .area .area-menus > .func:hover img {
  transform: scale(1.2);
}

main > .area .area-menus > .func:hover .label {
  color: yellow;
}

main > .area .area-menus > .func img {
  filter: brightness(1.3);
  transition: all 0.3s;
  width: 80rem;
  height: 90rem;
  display: block;
  margin: auto;
}

main > .area .area-menus > .func .label {
  margin-top: 20rem;
  font-size: 14rem;
  background: url(@/assets/imgs/box/text.png) center/100% no-repeat;
}
</style>